<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:21:13
 * @LastEditTime: 2024-03-25 20:07:20
 * @FilePath: \env-manager-pc\src\views\document\statistics\index.vue
-->
<script setup lang="ts">
import { reactive } from 'vue'
import QiyeJiance from '@/views/document/statistics/qiye_jiance.vue'
import QiyeFenbu from '@/views/document/statistics/qiyefenbu.vue'
import Anzhuang from '@/views/document/statistics/anzhuang.vue'
import { useEnvOrgs } from '@/utils/dataHook'
import useDashboardStore from '@/store/modules/dashboard'

const dashboardStore = useDashboardStore()

const searchForm = reactive({
  EnvOrgCode: '',
})
const envOrgs = useEnvOrgs()

function getData(owerId = '') {
  dashboardStore.getEnvDashboard(owerId)
}

getData()

const baseInfoConfig = computed(() => ([
  {
    name: '运维公司',
    prop: 'OwnerOrgNum',
    path: `/document/manager?DIM.Business.Envs.EnterpriseFilters.EnvOrgGUIDFilter=${searchForm.EnvOrgCode}`,
  }, {
    name: '企业',
    path: `/document/manager?DIM.Business.Envs.EnterpriseFilters.EnvOrgGUIDFilter=${searchForm.EnvOrgCode}`,
    prop: 'EntNum',
  },
  {
    name: '监测点',
    path: `/document/manager?DIM.Business.Envs.EnterpriseFilters.EnvOrgGUIDFilter=${searchForm.EnvOrgCode}`,
    prop: 'EntAllDevNum',
  },
]))
const deviceConfig = computed(() => ([
  {
    name: '总表',
    path: `/document/manager?DIM.Business.Envs.EnterpriseFilters.EnvOrgGUIDFilter=${searchForm.EnvOrgCode}`,
    prop: 'EntTotalDevNum',
  }, {
    name: '产污',
    path: `/document/manager?DIM.Business.Envs.EnterpriseFilters.EnvOrgGUIDFilter=${searchForm.EnvOrgCode}`,
    prop: 'ProduceDevNum',
  },
  {
    name: '治理',
    path: `/document/manager?DIM.Business.Envs.EnterpriseFilters.EnvOrgGUIDFilter=${searchForm.EnvOrgCode}`,
    prop: 'ReuseDevNum',
  },
]))

const options = computed(() => {
  return [
    {
      Name: '全部',
      Code: '',
    },
    ...envOrgs.value,
  ]
})

const router = useRouter()
function toPage(item: any) {
  router.push(item.path)
}
</script>

<template>
  <div class="p-[10px]">
    <PageHeader class="mb-[10px]!">
      <template #content>
        <div class="flex flex-items-center">
          <div class="w-[300px] flex flex-items-center">
            <div class="w-[100px]">
              管理机构：
            </div>
            <el-cascader
              v-model="searchForm.EnvOrgCode" :options="options" class="w-full" :props="{
                emitPath: false,
                children: 'Children',
                label: 'Name',
                value: 'Code',
              }" @change="getData"
            />
          </div>
          <ElButton class="ml-4" type="primary">
            查询
          </ElButton>
        </div>
      </template>
    </PageHeader>
    <ElRow :gutter="10" class="content-panel">
      <ElCol :span="12">
        <PageMain>
          <div class="flex flex-content-between">
            <div v-for="item in baseInfoConfig" :key="item.name" class="flex-1">
              <el-statistic
                class="text-center" :title="item.name"
                :value="dashboardStore.envDashboard[item.prop] || 0"
                :value-style="{ color: '#3089dc', cursor: 'pointer' }" @click="toPage(item)"
              />
            </div>
          </div>
        </PageMain>
      </ElCol>
      <ElCol :span="12">
        <PageMain>
          <div class="flex flex-content-between">
            <div v-for="item in deviceConfig" :key="item.name" class="flex-1">
              <el-statistic
                class="text-center" :title="item.name"
                :value="dashboardStore.envDashboard[item.prop] || 0"
                :value-style="{ color: '#3089dc', cursor: 'pointer' }" @click="toPage(item)"
              />
            </div>
          </div>
        </PageMain>
      </ElCol>
      <ElCol :span="12">
        <QiyeFenbu />
      </ElCol>
      <ElCol :span="12">
        <Anzhuang />
      </ElCol>
      <ElCol :span="24">
        <QiyeJiance />
      </ElCol>
    </ElRow>
  </div>
</template>

<style lang="scss" scoped>
.content-panel {
  :deep(.page-main) {
    margin: 0;
    margin-bottom: 10px;
  }
}
</style>
